<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">

			<el-form-item label="报销类型" prop="type">
				<el-select v-model="queryParams.type" placeholder="请选择报销类型">
					<el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="年度" prop="year">
				<el-date-picker v-model="queryParams.year" type="year" placeholder="选择年" value-format="yyyy">
				</el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="20">
			<el-col :span="6">
				<BarChart :chartData="chartBxStatData"></BarChart>
			</el-col>
			<el-col :span="18">
				<el-table :data="bxStatData" border :summary-method="getSummaries" show-summary>
					<el-table-column label="人员名称" align="center" prop="projectName" />
					<el-table-column label="1月" align="center" prop="a1" />
					<el-table-column label="2月" align="center" prop="b2" />
					<el-table-column label="3月" align="center" prop="c3" />
					<el-table-column label="4月" align="center" prop="d4" />
					<el-table-column label="5月" align="center" prop="e5" />
					<el-table-column label="6月" align="center" prop="f6" />
					<el-table-column label="7月" align="center" prop="g7" />
					<el-table-column label="8月" align="center" prop="h8" />
					<el-table-column label="9月" align="center" prop="i9" />
					<el-table-column label="10月" align="center" prop="j10" />
					<el-table-column label="11月" align="center" prop="k11" />
					<el-table-column label="12月" align="center" prop="l12" />
					<el-table-column label="合计" align="center" prop="all" />
				</el-table>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		uidAndMonthStat
	} from "@/api/business/bxStat"

	import BarChart from "../../dashboard/BarChart.vue"

	export default {
		components: {
			BarChart
		},
		data() {
			return {
				type: [{
						label: "常规报销",
						value: 1
					},
					{
						label: "差旅报销",
						value: 2
					},
				],
				// 查询条件
				queryParams: {

					type: 1,

					year: null,
				},
				// 图表数据
				chartBxStatData: [],
				// 报销统计数据
				bxStatData: [],
			}
		},
		created() {
			// 默认查询本年
			this.queryParams.year = this.parseTime(new Date(), '{y}');
			this.getList();
		},
		methods: {
			getList() {
				uidAndMonthStat(this.queryParams).then(res => {
					this.bxStatData = res.data.map(item => {
						Object.keys(item).forEach(key => {
							if (typeof item[key] === 'number') {
								item[key] = item[key].toFixed(2);
							}
						});
						return item;
					});
				});

				uidAndMonthStat(this.queryParams).then(res => {
					this.chartBxStatData = res.data;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.queryParams.year = this.parseTime(new Date(), '{y}');
				this.handleQuery();
			},
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];

				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + value;
							} else {
								return prev;
							}
						}, 0);
						sums[index] = sums[index].toFixed(2) + ' 元';
					} else {
						sums[index] = 'N/A';
					}
				});

				return sums;
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		color: #fff !important;
		background-color: rgb(64, 158, 255) !important;
	}
</style>